<template>
	<view>
		<view class="fixed inset-0" style="z-index: -1">
			<image class="h-full w-full" mode="aspectFill" src="/static/login/bg.png" />
		</view>
		<c-title-bar></c-title-bar>
		<view class="text-center" style="padding-top: 120rpx">
			<image src="/static/login/title.png" style="width: 168rpx" mode="widthFix" />
		</view>
		<view class="fixed inset-x-0 bottom-0 z-10" style="padding-bottom: 200rpx">
			<view class="text-center mb-3-1">
				<image src="/static/login/tip.png" style="width: 483rpx" mode="widthFix" />
			</view>
			<view class="mx-3-1 mb-2-2">
				<b-login-input type="text" placeholder="请输入手机号" prefixIcon="t-icon-zhanghao" :suffixLinkBtn="null" />
			</view>
			<view class="mx-3-1 mb-2-2">
				<b-login-input
					type="text"
					placeholder="请输入验证码"
					prefixIcon="icon-financial_key"
					:disabled="loadingValidCode"
					@clickSuffixText="getValidCode"
					:suffixText="waitingValidCode ? `${retrySeconds}秒后重试` : '获取'"
				/>
			</view>
			<view
				class="py-2-2 text-center mb-2-2 rounded-l bottom-shadow mx-3-1"
				style="background-color: #246a49"
				@click="handleLogin"
				hover-class="opacity-80"
				hover-start-time="0"
				hover-stay-time="50"
			>
				<text class="text-xxxxl font-semibold" style="color: #fdf6e5">登录</text>
			</view>
			<view class="row-center content-center">
				<view @click="handleAgree" class="row-center">
					<text class="iconfont text-l mr-1 color-main" :class="[isAgree ? 'icon-gouxuan' : 'icon-weixuanze']"></text>
					<text class="text-xn color-main">阅读并同意四季嗨商城小程序</text>
				</view>
				<view @click="toAgreement(false)" hover-class="opacity-80" hover-start-time="0" hover-stay-time="50">
					<text class="text-xn color-main font-semibold">《用户协议》</text>
				</view>
				<view @click="toAgreement(true)" hover-class="opacity-80" hover-start-time="0" hover-stay-time="50">
					<text class="text-xn color-main font-semibold">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		function handleLogin() {}
		/**
		 * agreement
		 */
		const isAgree = ref(false);
		function toAgreement(isPrivate) {
			uni.navigateTo({
				url: '/pages/agreement/agreement?isPrivate=' + (isPrivate ? '1' : '0'),
			});
		}
		function handleAgree() {
			isAgree.value = !isAgree.value;
		}
		return {
			handleLogin,
			isAgree,
			toAgreement,
			handleAgree,
		};
	},
};
</script>

<style>
page {
	height: 100%;
}
</style>
